<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<dev id="root" style="text-align: center">
    <h1>hello {{_data.name}}!</h1>  <!--插值语法-->
    <h1>hello {{name}}!</h1>  <!--插值语法-->

    <h2>{{Date()}}</h2>
    <p>{{1 + 1}}</p>
    <p v-for="i in 3">这是个循环： {{i}}</p>

    <p><a v-bind:href="url">url</a></p>
    <p><a :href="url">url</a></p>  <!--指令语法-->

    <p>{{school.name}}</p>
    <p>{{school.name.toUpperCase()}}</p>

    <p>单向数据绑定：<input type="text" v-bind:value="name"></p>
    <p>双向数据绑定：<input type="text" v-model:value="name"></p>
    <p>双向数据绑定：<input type="text" v-model="name"></p>

    <p>测试数据vue数据可用： {{$createElement}}</p>
</dev>
<script type="text/javascript">
    //创建vue
    let vm = new Vue({
        el: '#root',  //指定vue实例位于哪个容器内
        data() {
            return {
                name: 'ni_hao',
                url: 'http://www.baidu.com',
                school: {
                    name: 'hpp',
                    age: 11
                }
            }
        },
        methods:{
            a() {
                console.log(this);
            },
        },
        mounted() {
            console.log(this);
        },



        // data: {  //data用于存储容器
        //     name: 'ni_hao',
        //     url: 'http://www.baidu.com',
        //     school: {
        //         name: 'hpp',
        //         age: 11
        //     }
        // },

        // data: function () {
        //     return {
        //         name: 'ni_hao',
        //         url: 'http://www.baidu.com',
        //         school: {
        //             name: 'hpp',
        //             age: 11
        //         }
        //     }
        // }
    });
</script>
</body>
</html>
